<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
import geoJson from './xinjiang.json'
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      this.$echarts.registerMap('新疆', geoJson)
// 每个地区的坐标
      var geoCoordMap = {
        '巴音郭楞蒙古': [88.1653, 39.6002],
        '和田': [81.167, 36.9855],
        '哈密': [93.7793, 42.9236],
        '阿克苏': [82.9797, 41.0229],
        '阿勒泰': [88.2971, 47.0929],
        '喀什': [77.168, 37.8534],
        '塔城': [86.6272, 45.8514],
        '昌吉': [89.6814, 44.4507],
        '克孜勒苏柯尔克孜': [74.6301, 39.5233],
        '吐鲁番': [89.6375, 42.4127],
        '伊犁哈萨克': [82.5513, 43.5498],
        '博尔塔拉蒙古': [81.8481, 44.6979],
        '乌鲁木齐': [87.9236, 43.5883],
        '克拉玛依': [85.2869, 45.5054],
        '阿拉尔': [81.2769, 40.6549],
        '图木舒克': [79.1345, 39.8749],
        '五家渠': [87.5391, 44.3024],
        '石河子': [86.0229, 44.2914]
      };

// 每个地区的设备数量值
      var data = [
        {
          name: '巴音郭楞蒙古',
          value: 390,
          alarm_num: 54
        }, {
          name: '和田',
          value: 119
        }, {
          name: '哈密',
          value: 55,
          alarm_num: 9
        }, {
          name: '阿克苏',
          value: 329
        }, {
          name: '阿勒泰',
          value: 219,
          alarm_num: 14
        }, {
          name: '喀什',
          value: 290
        }, {
          name: '塔城',
          value: 319,
          alarm_num: 2
        }, {
          name: '昌吉',
          value: 199
        }, {
          name: '克孜勒苏柯尔克孜',
          value: 419,
          alarm_num: 11
        }, {
          name: '吐鲁番',
          value: 299
        }, {
          name: '伊犁哈萨克',
          value: 49
        }, {
          name: '博尔塔拉蒙古',
          value: 219,
          alarm_num: 15
        }, {
          name: '乌鲁木齐',
          value: 89
        }, {
          name: '克拉玛依',
          value: 49
        }, {
          name: '阿拉尔',
          value: 209,
          alarm_num: 27
        }, {
          name: '图木舒克',
          value: 129
        }, {
          name: '五家渠',
          value: 49,
          alarm_num: 7
        }, {
          name: '石河子',
          value: 229
        }];

// 每个地区的设备告警数量
      var data2 = [
        {
          name: '巴音郭楞蒙古',
          value: 54
        }, {
          name: '哈密',
          value: 9
        }, {
          name: '阿勒泰',
          value: 14
        }, {
          name: '塔城',
          value: 2
        }, {
          name: '克孜勒苏柯尔克孜',
          value: 11
        }, {
          name: '博尔塔拉蒙古',
          value: 15
        }, {
          name: '乌鲁木齐',
          value: 12
        }, {
          name: '阿拉尔',
          value: 27
        }, {
          name: '五家渠',
          value: 7
        }]


      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        // 有数据的地区的名称和value值
        return res;
      };

// 设定series是一个空的数组
      var series = [];
      [
        ['新疆', data]
      ].forEach(function(item, i) {
        series.push(
            {
              name: '定位点',
              type: 'effectScatter', // 散点图
              coordinateSystem: 'geo', // 使用地理坐标系
              hoverAnimation: 'false',
              legendHoverLink: 'false',
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 3
              },
              data: convertData(item[1]),
              symbolSize: function(val) {
                if (val[2] <= 100) {
                  return 4
                }
                if (val[2] > 100 && val[2] <= 200) {
                  return 8
                }
                if (val[2] > 200 && val[2] <= 300) {
                  return 12
                }
                if (val[2] > 300 && val[2] <= 400) {
                  return 16
                }
                if (val[2] > 400 && val[2] <= 500) {
                  return 20
                }
                if (val[2] > 500) {
                  return 24
                }
              },
              itemStyle: {
                normal: {
                  color: '#5599E4',
                }
              },
              zlevel: 1,
            }, {
              type: 'map',
              map: '新疆',
              zlevel: 0,
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#111'
                },
                emphasis: {
                  areaColor: '#2a333d'
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#ddb926',
                    fontSize: 10
                  },
                },
                emphasis: {
                  textStyle: {
                    color: '#ddb926',
                    fontSize: 10
                  },
                }

              },
              data: data
            }, {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: 25,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: 9,
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: '#F62157', //标志颜色
                }
              },
              zlevel: 6,
              data: convertData(data2)
            });
      });
      const option = {
        backgroundColor: '#4f5555',
        title: {
          text: '新疆设备部署图',
          subtext: '散点圆的大小随设备数量改变而改变',
          left: 'center',
          textStyle: {
            color: '#7bbfea'
          }
        },
        geo: {
          map: '新疆',
          label: {
            textStyle: {
              fontSize: '.1rem',
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#587A9F'
            },
            emphasis: {
              areaColor: '#ccc'
            }
          }
        },
        series: series
      };
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
